<template>
    <div class="data-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="articles-container">
            <h4>文章量：</h4>
            <div class="numContainer">
              <h1 class="articleCount">{{ articleCount }}</h1>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="comments-container">
            <h4>评论量：</h4>
            <div class="numContainer">
              <h1 class="commentCount">{{ commentCount }}</h1>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="followers-container">
            <h4>粉丝量：</h4>
            <div class="numContainer">
              <h1 class="followerCount">{{ followerCount }}</h1>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="supports-container">
            <h4>点赞量：</h4>
            <div class="numContainer">
              <h1 class="supportCount">{{ supportCount }}</h1>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="charts-container">
      <el-row>
        <el-col :span="12">
          <div class="articles-chart-container" ref="articlesChartContainer">
          </div>
        </el-col>
        <el-col :span="12">
          <div class="comments-chart-container" ref="commentsChartContainer">
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import { getCurrentInstance } from 'vue';
  export default {
    name: "",
    data() {
      return {
        proxy: getCurrentInstance().proxy,
        articleCount: '',
        commentCount: '',
        followerCount: '',
        supportCount:'',
        newArticleCount: '',
        newCommentCount: '',
        articlesChartContainer: null,
        articlesChartInstance:null,
        commentsChartContainer: null,
        commentsChartInstance:null,
      }
    },
    mounted() {
      this.fetchData();
    },
    methods: {
      //渲染饼状图
      getArticlesCharts() {
        const chartDom = this.$refs.articlesChartContainer
        this.articlesChartInstance = echarts.init(chartDom);
        const option = {
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: this.articleCount - this.newArticleCount,
                  name: "已有文章数量"
                },
                {
                  value: this.newArticleCount,
                  name: '本周新增文章数量'
                },
              ],
            },
          ],
        };
        // option && myChart.setOption(option);
        this.articlesChartInstance.setOption(option);
        window.addEventListener('resize', () => {
          this.articlesChartInstance.resize();
        });
      },
      getCommentsCharts() {
        const chartDom = this.$refs.commentsChartContainer
        this.commentsChartInstance = echarts.init(chartDom);
        const option = {
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: this.commentCount - this.newCommentCount,
                  name: "已有评论数量"
                },
                {
                  value: this.newCommentCount,
                  name: '本周新增评论数量'
                },
              ],
            },
          ],
        };
        // option && myChart.setOption(option);
        this.commentsChartInstance.setOption(option);
        window.addEventListener('resize', () => {
          this.commentsChartInstance.resize();
        });
      },
      
      async fetchData() {
        try {
          let result = await this.proxy.Request({
            url: "/dashboard/0",
            method: "get",
            params:{
                token:'',
            },
          });
          if (!result.data){
            return;
          }
          this.articleCount = result.data.articleCount;
          this.commentCount = result.data.commentCount;
          this.followerCount = result.data.followerCount;
          this.supportCount = result.data.supportCount;
          this.newArticleCount = result.data.newArticleCount;
          this.newCommentCount = result.data.newCommentCount;
        } catch(error){
          console.error("获取数据时出错：",error)
        }
        this.getArticlesCharts();
        this.getCommentsCharts();
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .articles-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    background-color: #f5f5f5;
  }
  
  .comments-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    background-color: #f5f5f5;
  }

  .followers-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    background-color: #f5f5f5;
  }
  
  .supports-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    background-color: #f5f5f5;
  }
  
  .articleCount {
    color: rgb(163, 198, 228);
  }
  
  .commentCount {
    color: rgb(163, 198, 228);
  }
  
  .userCount {
    color: rgb(163, 198, 228);
  }
  
  .numContainer {
    display: flex;
    justify-content: center;
    align-items: right;
    height: 100px;
  }
  .charts-container{
    height: 600px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f5f5f5;
  }
  
  .articles-chart-container {
    height: 500px;
    height: 300px;
  }
  .comments-chart-container {
    height: 500px;
    height: 300px;
  }
  .users-chart-container {
    height: 500px;
    height: 300px;
  }
  </style>